<template>
	<div class="left-table-container">
		<!--fixed header-->
		<div v-if="hasFixed" class="left-tab-fixed-box">
			<div class="left-tab-fixed-header">
				<div v-for="(item) in tableHeader" :key="item.key" :style="{height: `${cellHeight}px`}">
					<div v-if="item.fixed" :style="setCellStyle(item)" class="left-tab-cell-item" style="border-right: solid 1px #dcdee2;">
						<div v-if="item.key === 'operation'">
							<span class="check-item" style="font-size: 12px;" @click="onClearCheck">取消</span>
						</div>
						<div v-else>{{ item.name }}</div>
					</div>
				</div>
			</div>
			<!--fixed table body-->
			<div ref="leftTableFixed" class="left-tab-fixed-body" :style="{height: `${height - cellHeight - 8}px`}" @scroll="onLeftTableBodyFixedScroll">
				<div
					v-for="(item, index) in tableData"
					:key="index"
					:class="index === hoverIdx ? 'left-tab-fixed-body-row hover-style' : 'left-tab-fixed-body-row'"
					:style="{background: setCheckStyle(item)}"
					@mouseover="onMouseOver(index)"
					@mouseleave="onMouseLeave(index)"
				>
					<div
						v-for="(headedItem, headerIndex) in tableHeader"
						:key="headerIndex"
						class="left-tab-body-cell-box"
						:style="{height: `${cellHeight}px`}"
					>
						<div v-if="headedItem.fixed" :style="setCellStyle(headedItem)" class="left-tab-body-cell">
							<div v-if="headedItem.key === 'operation'">
								<span class="check-item el-icon-s-flag" :style="{ color: checkArr.includes(item.id) ? '#2d8cf0' : '#808695' }" @click="onCheckRow(item)"></span>
							</div>
							<div v-else>{{ item[headedItem.key] }}</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!--table header-->
		<div ref="leftTableHeader" class="left-tab-header">
			<div v-for="(item) in tableHeader" :key="item.key" :style="{height: `${cellHeight}px`}">
				<div v-if="item.key === 'operation'" :style="setCellStyle(item)" class="left-tab-cell-item">
					<span class="check-item" style="font-size: 12px;" @click="onClearCheck">取消</span>
				</div>
				<div v-else :style="setCellStyle(item)" class="left-tab-cell-item">{{ item.name }}</div>
			</div>
			<div class="cell-gutter" :style="{height: `${cellHeight}px`}"></div>
		</div>
		<!--table body-->
		<div ref="leftTableBody" :style="{height: `${height - cellHeight}px`}" class="left-table-body" @scroll="onLeftTableBodyScroll">
			<div
				v-for="(item, index) in tableData"
				:key="index"
				class="left-tab-body-cell-box"
				:style="{height: `${cellHeight}px`}"
				@mouseover="onMouseOver(index)"
				@mouseleave="onMouseLeave(index)"
			>
				<div
					v-for="(headerItem, headerIndex) in tableHeader"
					:key="headerIndex"
					style="height: 100%;"
					:class="index === hoverIdx ? 'hover-style' : ''"
					:style="{background: setCheckStyle(item)}"
				>
					<div v-if="headerItem.key === 'operation'" class="left-tab-body-cell" :style="setCellStyle(headerItem)">
						<span class="check-item el-icon-s-flag" :style="{ color: checkArr.includes(item.id) ? '#2d8cf0' : '#808695' }" @click="onCheckRow(item)"></span>
					</div>
					<div v-else class="left-tab-body-cell" :style="setCellStyle(headerItem)">{{ item[headerItem.key] }}</div>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
    import leftRightMix from './left-right-mix';
    import { debounce } from '../../../../utils/jk/jk-tool';
    export default {
        mixins: [leftRightMix],
        props: {
            checkArr: {
                type: Array,
                default() {
                    return [];
                }
            },
            tableData: {
                type: Array,
                default() {
                    return [];
                }
            },
            headerDateRangeObj: {
                type: Object,
                default() {
                    return {};
                }
            },
            scrollTop: {
                type: Number,
                default: 0
            },
            scrollLeft: {
                type: Number,
                default: 0
            },
            height: {
                type: Number,
                default: 0
            },
            hoverIndex: {
                type: Number,
                default: null
            }
        },
        data() {
            return {
                checked: [],
                hasFixed: false,
                tableHeader: [
                    { key: 'operation', name: '操作', align: 'center', fixed: false, width: 60 },
                    { key: 'code', name: '计划单', align: 'center', fixed: false, width: 120 },
                    { key: 'productName', name: '品种', align: 'left', fixed: false, width: 280 },
                    { key: 'plannerQty', name: '计划数量', align: 'right', fixed: false, width: 80 },
                    { key: 'deliveryDateFrom', name: '计划开工日期', align: 'left', fixed: false, width: 120 },
                    { key: 'deliveryDateTo', name: '计划完工日期', align: 'left', fixed: false, width: 120 },
                    { key: 'batchCode', name: '批号', align: 'left', fixed: false, width: 120 },
                    { key: 'productOrderCode', name: '生产订单', align: 'left', fixed: false, width: 120 }
                ],
                hoverIdx: null
            };
        },
        methods: {
            onClearCheck() {
                this.$emit('on-clear');
            },
            onLeftTableBodyFixedScroll() {
                // debounce(() => {
                this.$refs.leftTableBody.scrollTop = this.$refs.leftTableFixed.scrollTop;
                this.$emit('on-scroll', {
                    scrollTop: this.$refs.leftTableFixed.scrollTop
                });
                // }, 10);
            },
            onCheckRow({ id }) {
                this.$emit('on-check', id);
            },
            onMouseLeave() {
                this.hoverIdx = null;
                this.$emit('on-mouse', this.hoverIdx);
            },
            onMouseOver(index) {
                this.hoverIdx = index;
                this.$emit('on-mouse', this.hoverIdx);
            },
            onLeftTableBodyScroll() {
                // debounce(() => {
                this.$refs.leftTableHeader.scrollLeft = this.$refs.leftTableBody.scrollLeft;
                if (this.$refs.leftTableFixed) {
                    this.$refs.leftTableFixed.scrollTop = this.$refs.leftTableBody.scrollTop;
                }
                this.$emit('on-scroll', {
                    scrollTop: this.$refs.leftTableBody.scrollTop
                });
                // }, 10);
            }
        },
        watch: {
            scrollTop(newVal) {
                this.$refs.leftTableHeader.scrollTop = newVal;
                this.$refs.leftTableBody.scrollTop = newVal;
            },
            headerDateRangeObj: {
                handler() {
                    this.hasFixed = this.tableHeader.some(x => x.fixed);
                },
                deep: true
            },
            hoverIndex(newVal) {
                this.hoverIdx = newVal;
            }
        }
    };
</script>
<style scoped lang="scss">
    @import "./left-right-table";
</style>
